<template>
  <div class="side_model" ref="sideModel" @click="destroyed">
    <transition name="fade-right" @after-leave="afterLeave">
      <div
        class="sideBox"
        :style="{ width: width + 'px' }"
        v-if="modelStatus"
        @click.stop="
          () => {
            return false
          }
        "
      >
        <slot></slot>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div v-if="modelStatus" class="side_model_bg el-dialog__wrapper"></div>
    </transition>
  </div>
</template>
<script setup name="sideModel">
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  width: {
    type: Number,
    default: 350,
  },
  modelValue: {
    type: Boolean,
  },
})
const modelStatus = ref(false)
watch(
  () => props.modelValue,
  (val) => {
    modelStatus.value = val
  }
)
watch(
  () => modelStatus.value,
  (val) => {
    if (val) {
      append()
    }
  }
)
function afterLeave() {
  proxy.$el.parentNode.removeChild(proxy.$el)
}
function destroyed() {
  modelStatus.value = false
  emits('update:modelValue', false)
  emits('returnBack', false)
}
function append() {
  document.body.appendChild(proxy.$el)
}
onMounted(() => {
  proxy.$el.parentNode.removeChild(proxy.$el)
})
/* model: {
    prop: "modelValue",
    event: "returnBack"
  }, */
</script>

<style scoped>
.side_model_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.sideBox {
  height: 100%;
  background-color: #f2f2f2;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1003;
}
.side_model {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1002;
}
</style>
